<template>
    <div class="register">
        <div class="register_main">
            <h2>注册智能云平台</h2>
            <el-form :inline="true" :model="form" class="demo-form-inline">
                <el-form-item >
                    <el-row>
                        <el-col :span="3" class="area-code"><el-input :disabled="true" placeholder="+86"></el-input></el-col>
                        <el-col :span="20"><el-input v-model="form.phone" placeholder="请输入手机号码"></el-input></el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="15"><el-input v-model="form.verificationCode" placeholder="请输入验证码"></el-input></el-col>
                        <el-col :span="8" class="getverificationCode"><el-button :click="getverificationCode()" :disabled=" codeTime == 0 ? true : false">{{ codeTime == 0 ? codeTime : "获取验证码" }}</el-button></el-col>
                    </el-row>
                    
                    <el-input v-model="form.password" placeholder="请输入密码"></el-input>
                    <el-input v-model="form.passwordTwo" placeholder="请再次输入密码"></el-input>
                </el-form-item>
                <el-form-item class="submitRegister">
                     <el-button type="success" :click="submitRegister()">同意并注册</el-button>
                </el-form-item>
            </el-form>
            <el-button type="text" class="go-back-login">返回账号登录</el-button>
        </div>
    </div>
</template>

<script>
export default {
    name:"register",
    data () {
        return {
            form: {
                phone: "",
                verificationCode: "" ,
                password: "",
                passwordTwo: "",
            },
            codeTime: 0
        }
    },
    created() {
        console.log(this.codeTime)
    },
    methods: {
        submitRegister(){

        },
        getverificationCode(){
            this.codeTime = 60;
            let timer  = setInterval(()=>{
                this.codeTime--;
                if(this.codeTime <= 0 ){
                    clearInterval(timer);
                }
            },1000)
        }
    }
}
</script>

<style lang="less">
    @import '../../style/color.less';
    .register_main{
        position: absolute;
        left: 50%;
        top: 50%;
        -ms-transform:translate(-50%,-50%); 	/* IE 9 */
        -moz-transform:translate(-50%,-50%); 	/* Firefox */
        -webkit-transform:translate(-50%,-50%); /* Safari 和 Chrome */
        transform:translate(-50%,-50%);
        width: 550px;
        margin: 0 auto;
        h2{
            margin-bottom: 70px;
            font-size: 40px;
        }
        input{
            width: 100%;
            margin-bottom: 30px;
            height: 50px;
            line-height: 50px;
            font-size: 20px;
        }
        .el-input__inner{
            padding: 0 8px;
        }
        .el-input.is-disabled .el-input__inner{
            background-color: transparent;
        }
        .area-code,{
            margin-right: 4.16667%;
        }
        .getverificationCode{
            margin-left: 4.16667%;
            text-align: center;
            button{
                width: 100%;
                height: 50px;
                font-size: 20px;
            }
        }
        .el-form-item{
            width: 100%;
            margin: 0;
            .el-form-item__content{
                width: 100%;
            }
        }
        .submitRegister{
            width: 100%;
            .el-form-item__content{
                width: 100%;
                button {
                    width: 100%;
                    background-color: @themeColor;
                    border-color: @themeColor;
                    height: 50px;
                    font-size: 20px;
                };
            }
        }
        .go-back-login{
            color: #333333;
            font-size: 16px;
            margin-top: 10px;
        }
    }
</style>